<template>
  <div class="top">
    <a-space align="center">
      <a-input-search
        v-model:value="searchTagName"
        placeholder="输入标签名称"
        enter-button="搜索"
        size="large"
        @search="onSearch"
        allow-clear
      />
      <a-input v-model:value="addTagName" placeholder="输入标签名称" allow-clear size="large" />
      <a-button type="primary" @click="doAddTag(addTagName)" size="large">添加</a-button>
    </a-space>
  </div>

  <div class="tag-list">
    <!-- 动态渲染 tags 数据 -->
    <a-tag
      v-for="(tag, index) in tags"
      :key="index"
      closable
      @close="handleDelete(tag.id)"
      size="large"
      class="tag-entity"
    >
      {{ tag.tagName }}
    </a-tag>
    <!--    <a-input-->
    <!--      v-if="state.inputVisible"-->
    <!--      ref="inputRef"-->
    <!--      v-model:value="state.inputValue"-->
    <!--      type="text"-->
    <!--      size="small"-->
    <!--      :style="{ width: '78px' }"-->
    <!--      @blur="handleInputConfirm"-->
    <!--      @keyup.enter="handleInputConfirm"-->
    <!--    />-->
    <!--    <a-tag v-else style="background: #fff; border-style: dashed" @click="showInput">-->
    <!--      <plus-outlined />-->
    <!--      New Tag-->
    <!--    </a-tag>-->
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, type UnwrapRef } from 'vue'
import { addTag, deleteTag, listTag } from '@/api/tagController'
import { message } from 'ant-design-vue'

// 删除数据
const handleDelete = async (id: UnwrapRef<API.TagVO['id']> | undefined) => {
  if (!id) {
    return
  }
  const res = await deleteTag({ id })
  if (res.data.code === 200) {
    message.success('删除成功')
    // 刷新数据
    fetchData()
  } else {
    message.error('删除失败')
  }
}

const tags = ref(<API.TagVO[]>[])

// 获取数据
const fetchData = async () => {
  const res = await listTag({})
  if (res.data.code === 200 && res.data.data) {
    tags.value = res.data.data ?? []
    console.log(tags)
  } else {
    message.error('获取数据失败，' + res.data.message)
  }
}

const searchTagName = ref<string>('')

const onSearch = async (searchValue: string) => {
  const res = await listTag({ tagName: searchValue })
  if (res.data.code === 200 && res.data.data) {
    tags.value = res.data.data ?? []
  } else {
    message.error('没有相关数据，' + res.data.message)
  }
}

const addTagName = ref<string>('')
const doAddTag = async (tagName: string) => {
  if (!tagName.trim()) {
    message.warning('请输入标签名称')
    return
  }

  const res = await addTag({ tagName: tagName })
  if (res.data.code === 200) {
    message.success('添加成功')
    // 清空输入框
    addTagName.value = ''
    await fetchData()
  } else {
    message.error('添加失败，' + res.data.message)
  }
}

// const inputRef = ref();
// const state = reactive({
//   tags: ['Unremovable', 'Tag 2', 'Tag 3Tag 3Tag 3Tag 3Tag 3Tag 3Tag 3'],
//   inputVisible: false,
//   inputValue: '',
// });
// const showInput = () => {
//   state.inputVisible = true;
//   nextTick(() => {
//     inputRef.value.focus();
//   });
// };
//
// const handleInputConfirm = () => {
//   const inputValue = state.inputValue;
//   let tags = state.tags;
//   if (inputValue && tags.indexOf(inputValue) === -1) {
//     tags = [...tags, inputValue];
//   }
//   console.log(tags);
//   Object.assign(state, {
//     tags,
//     inputVisible: false,
//     inputValue: '',
//   });
// };

// 页面加载时获取数据，请求一次
onMounted(() => {
  fetchData()
})
</script>

<style scoped>
.top {
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
}

.tag-list {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-height: 200px;
}

.tag-entity {
  font-size: 16px;
  padding: 8px 12px;
  border-radius: 6px;
  margin: 4px;
  display: inline-flex;
  align-items: center;
  min-width: 60px;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.tag-entity:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
</style>
